import React, { Component } from 'react'

export default class Counter extends Component {
  state = {
    num: 0,
    person: {
      name: 'jack',
      age: 18
    }
  }
  increment = () => {
    const num = this.state.num + 1
    this.setState({
      num
    })
  }
  decrement = () => {
    const num = this.state.num - 1
    this.setState({
      num
    })
  }
  setAge = () => {
    const person = Object.assign(this.state.person, {age: 20})
    this.setState({
      person
    })
  }
  showNum = () => {
    console.log('当前调用', this.state.num)
    this.setState((preState, props) => {
      return {
        num: preState.num + 1
      }
    })
  }
  mNum = () => {
    this.showNum()
    this.showNum()
    this.showNum()
  }
  render() {
    const {person} = this.state // 解构
    return (
      <div className='counter'>
        <p>姓名：{person.name}，年龄：{person.age}</p>
        <button onClick={this.setAge}>修改年龄</button>
        <button onClick={this.decrement}>-</button>
        <span>当前数值：{this.state.num}</span>
        <button onClick={this.increment}>+</button>

        <button onClick={this.mNum}>多次调用setState</button>
      </div>
    )
  }
}
